<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-22 16:09:31
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-23 09:59:09
-->
<template>
    <div>
      <a-drawer
        v-model:open="modalOpen"
        :title="title"
        width="50%"
        placement="right"
      >
        <a-space direction="vertical" style="width: 100%" :size="16">
          <a-form
            :model="formData"
            ref="formRef"
            labelAlign="left"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <a-form-item
              label="卡券名称"
              name="name"
              :rules="[{ required: true, message: '输入卡券名称' }]"
            >
              <a-input v-model:value="formData.name" placeholder="输入卡券名称" />
            </a-form-item>
            <a-form-item
              label="卡券类别"
              name="couponCategory"
              :rules="[{ required: true, message: '请选择卡券类别' }]"
            >
              <a-select
                ref="select"
                v-model:value="formData.couponCategory"
                style="width: 100%"
                placeholder="卡券类别"
              >
                <a-select-option :value="1">购物券</a-select-option>
                <a-select-option :value="2">鉴定券</a-select-option>
                <a-select-option :value="3">养护券</a-select-option>
                <a-select-option :value="4">找货券</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="使用类目"
              name="typeId"
              :rules="[{ required: true, message: '请选择使用类目' }]"
            >
              <a-select
                ref="select"
                mode="multiple"
                v-model:value="formData.typeId"
                style="width: 100%"
                placeholder="使用类目"
              >
                <a-select-option :value="0">全部</a-select-option>
                <a-select-option
                  v-for="item in goodsTypeList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
            <a-form-item
              label="成长等级"
              name="level"
              :rules="[{ required: true, message: '请选择成长等级' }]"
            >
              <a-select
                ref="select"
                v-model:value="formData.level"
                style="width: 100%"
                placeholder="成长等级"
              >
                <a-select-option :value="0">全部</a-select-option>
                <a-select-option
                  v-for="item in growthLevelList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.level }}级</a-select-option
                >
              </a-select>
            </a-form-item>
            <a-form-item
              label="抵扣方式"
              name="type"
              :rules="[{ required: true, message: '请选择抵扣方式' }]"
            >
              <a-radio-group
                v-model:value="formData.type"
                @change="handleChangeType"
              >
                <a-radio :style="radioStyle" :value="1"
                  >满减
                  <a-input
                    v-model:value="formData.minAmount"
                    placeholder="输入金额"
                    type="number"
                    style="width: 150px; margin-left: 10px; margin-right: 10px"
                    addon-before="满"
                  />
                  减
                  <a-input
                    v-model:value="formData.amount"
                    placeholder="输入金额"
                    type="number"
                    style="width: 150px; margin-left: 10px"
                    addon-after="元"
                  />
                </a-radio>
                <a-radio :style="radioStyle" :value="2"
                  >折扣
                  <a-input-number
                    v-model:value="rebates"
                    placeholder="输入折扣比例"
                    max="10"
                    min="0.1"
                    addon-after="折"
                    style="width: 150px; margin-left: 10px"
                  />
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="叠加使用"
              name="overlayUse"
              :rules="[{ required: true, message: '请选择是否叠加使用' }]"
            >
              <a-radio-group v-model:value="formData.overlayUse">
                <a-radio :value="1">叠加使用 </a-radio>
                <a-radio :value="0">不可叠加 </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="有效时长"
              name="validDay"
              :rules="[{ required: true, message: '请选择有效时长' }]"
            >
              <a-input-number
                v-model:value="formData.validDay"
                placeholder="请输入卡券有限期时长天数"
                type="number"
                :min="0"
                :precision="0"
                style="width: 300px;"
                addon-after="天"
              />
            </a-form-item>
            <a-form-item
              label="使用规则"
              name="introduce"
              :rules="[{ required: true, message: '输入使用规则' }]"
            >
              <a-textarea
                v-model:value="formData.introduce"
                placeholder="输入使用规则"
                :rows="4"
              />
            </a-form-item>
            <a-form-item
              label="状态"
              name="state"
              :rules="[{ required: true, message: '请选择状态' }]"
            >
              <a-select
                ref="select"
                v-model:value="formData.state"
                placeholder="请选择卡券状态"
              >
                <a-select-option :value="1">启用</a-select-option>
                <a-select-option :value="2">禁用</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
              <div class="btns center">
                <a-space>
                  <a-button @click="handleCloseDialog">取消</a-button>
                  <a-button type="primary" @click="handleSubmit">确定</a-button>
                </a-space>
              </div>
            </a-form-item>
          </a-form>
        </a-space>
      </a-drawer>
    </div>
  </template>
  <script setup>
  import { ref, reactive, nextTick } from "vue";
  import { saveCouponConfig } from "@/api/market";
  import { goodsType } from "@/api/order";
  import { listGrowthConfig } from "@/api/group";
  const modalOpen = ref(false);
  const formData = ref({
    name: undefined,
    couponCategory: undefined,
    typeId: undefined,
    groupType: [0],
    type: undefined,
    overlayUse: undefined,
    maxNum: 0,
    validType: 1,
    validDay: undefined,
    introduce: undefined,
    state: undefined,
    startTime: undefined,
    endTime: undefined,
    minAmount: undefined,
    amount: undefined,
    goodsType: undefined,
    source: 3,
    repeatState: 0,
    applicable: "ces",
    growthId: undefined
  });
  // 折扣
  const rebates = ref(undefined);
  const formRef = ref(null);
  const title = ref("");
  const open = (titles, record) => {
    title.value = titles;
    getGoodsType();
    getListGrowthConfig()
    modalOpen.value = true;
    nextTick(() => {
      formData.value = Object.assign({}, record);
      if (formData.value.type == 2) {
      rebates.value = formData.value.amount;
      formData.value.amount = undefined;
      formData.value.minAmount = undefined 
    } else {
      rebates.value = undefined
    }
      formRef.value.resetFields();
    });
  };
  // 抵扣方式
  function handleChangeType(val){
    formData.value.amount = undefined
    formData.value.minAmount = undefined
    rebates.value = undefined
  }
  const radioStyle = reactive({
    display: "flex",
    height: "30px",
    lineHeight: "30px",
    marginBottom: "10px",
  });
  // 获取类目
  const goodsTypeList = ref([]);
  const getGoodsType = async () => {
    const result = await goodsType();
    if (result.code == 200) {
      goodsTypeList.value = result.data;
    }
  };
//   成长等级
const growthLevelList = ref([]);
const getListGrowthConfig = async () => {
  const data = await listGrowthConfig({page:1,pageSize:999});
  if (data.code === 200) {
    growthLevelList.value = data.data.list;
  }
};
  function handleCloseDialog() {
    modalOpen.value = false;
    formData.value = {};
    formRef.value.resetFields();
  }
  
  const emits = defineEmits(["refreshList"]);
  function handleSubmit() {
    if (formData.value.type == 2) {
      formData.value.amount = rebates;
    }
    formData.value.repeatState = 0;
    formData.value.maxNum = 0
    formData.value.source = 3
    formData.value.groupType = [0]
    formData.value.validType = 1
    formData.value.applicable = formData.value.introduce;
    formRef.value.validate().then(() => {
      saveCouponConfig(formData.value).then((res) => {
        if (res.code === 200) {
          handleCloseDialog();
          emits("refreshList");
        }
      });
    });
  }
  defineExpose({ modalOpen, open });
  </script>
  <style lang="less" scoped></style>
  